<template>
   <section class="selector">
      <div>
         <div class="nav-selector"
              v-if="navSelector.length"
              v-for="(item,index) of navSelector" :key="index"
         >
               <ul :ref="navSelectors+index">
                  <li v-for="(items, indexs) of item"
                      :key="items.id+indexs"
                      @click.stop="_navSelector_2(indexs, index)"
                      :data-index="indexs"
                  >
                     <div @click="_click(items.NavName, indexs, items)"
                     >
                        <router-link :to="items.path">
                           {{items.NavName}}
                        </router-link>
                     </div>
                  </li>
               </ul>

         </div>
      </div>
   </section>
</template>

<script>
   import {lists} from '../../assets/util/util'
   import {mapActions, mapGetters} from 'vuex'

   export default {
      name: 'navSelector',
      data() {
         return {
            actions: 1,
            obj: {},
            Selector: '',
            navSelectors: 'navSelector'
         }
      },
      props: {
         navSelector: {
            type: Array,
            default() {
               return []
            }
         }
      },
      computed: {
         ...mapGetters([
            'geturl'
         ])
      },
      methods: {
         _click(Name, indexs, items) {
            if (indexs === 0 || indexs === 1) {
               if (indexs === 1) {
                  if (this.obj[items.field]) {
                    delete this.obj[items.field]
                     this._getData({obj: this.obj})
                  }
               }
               return
            }
            if (!isNaN(parseFloat(Name))) {
               if (!this.obj[items.field]) {
                  this.obj[items.field] = String(parseFloat(Name))
               } else {
                  this.obj[items.field] = String(parseFloat(Name))
               }
            } else {
               if (!this.obj[items.field]) {
                  this.obj[items.field] = Name.substr(0, Name.length)
               } else {
                  this.obj[items.field] = Name.substr(0, Name.length)
               }
            }
            // console.log(isNaN(parseFloat(Name)))
            this._getData({obj: this.obj})
         },
         _navSelector_2(indexs, i) {
            if ((indexs === 0)) {
               return
            }
            let navSelector = `navSelector${i}`
            let children = this.$refs[navSelector][0].children
            Array.from(children).forEach((item, index) => {
               lists.removeClass(item, 'active')
               if (lists.customAttribute(item, 'index') === `${indexs}`) {
                  lists.addClass(item, 'active')
               }
            })
         },
         _getData({obj}) {
            this.$emit('selector')
            this.RequestData({
               url: this.geturl,
               parameter: obj,
               isClose: true
            })
         },
         ...mapActions({
            RequestData: 'setData'
         })
      }
   }
</script>

<style scoped lang="stylus">
   .selector
      width 100%
      box-sizing border-box
      padding 15px 10px
      background-color #fff
      border 1px #efefef solid
      min-height 78px
      .nav-selector
         display flex
         align-items center
         width 100%
         height 46px
         ul
            display flex
            li
               min-width 28px
               &:nth-child(1)
                  box-sizing border-box
                  padding-left 10px
                  width 95px
               &:not(:nth-child(1))
                  margin-right 62px
                  a:hover
                     color aqua
               a
                  color #333
                  font-size 14px
            li.active
               a
                  color aqua
</style>
